<template>
	<view class="content">
		<!-- 头部 -->
		<musicHead title="搜索" :icon="true" :iconBlack="true"></musicHead>
		<view class="container">
			<scroll-view scroll-y="true">
				<!-- 搜索 -->
				<view class="search">
					<text class="iconfont icon-Magnifier"></text>
					<input type="text" placeholder="搜索歌曲" v-model="searchWord" @confirm="handleToSearch(searchWord)" @input="handleSuggest">
					<text class="iconfont icon-guanbi" v-show="searchType != 1" @tap="searchDetail"></text>
				</view>
				<block v-if="searchType == 1">
					<!-- 历史记录 -->
					<view class="search_history">
						<view class="search_history_head">
							<text>历史记录</text>
							<text class="iconfont icon-icon" @tap="handleClear"></text>
						</view>
						<view class="search_history_cont">
							<view v-for="(item, index) in searchHistory" :key="index" @tap="handleToHistoryWord(item)">{{ item }}</view>
						</view>
					</view>
					<!-- 热搜榜 -->
					<view class="search_hot">
						<view class="search_hot_title">热搜榜</view>
						<view class="search_hot_cont" v-for="(item, index) in searchHot" :key="index" @tap="handleToWords(item.searchWord)">
							<view class="search_hot_lt">{{ index + 1}}</view>
							<view class="search_hot_ct"> 
								<view class="search_hot_top">{{ item.searchWord }}<image :src="item.iconUrl" mode=""></image></view>
								<view class="search_hot_bot">{{ item.content }}</view>
							</view>
							<view class="search_hot_rt">{{ item.score }}</view>
						</view>
					</view>
				</block>
				<!-- 搜索列表二 -->
				<block v-else-if="searchType == 2">
					<view class="search_res">
						<view class="search_result" v-for="(item, index) in searchList" :key="index" @tap="handleToDetail(item.id)">
							<view class="search_result_item">
								<view>{{ item.name }}</view>
								<image src="../../static/sq.png" mode=""></image>{{ item.artists[0].name }} -<text>{{ item.album.name }}</text>
							</view>
							<text class="iconfont icon-bofang"></text>
						</view>
					</view>
				</block>
				<!-- 搜索关键词 -->
				<block v-else-if="searchType == 3">
					<view class="search_suggest_item">
						<view class="search_suggest_box">
							<view class="search_suggest_head">搜索“{{ searchWord }}”</view>
							<view class="search_suggest_cont" v-for="(item, index) in searchSuggest" :key="index" @tap="handleToWords(item.keyword)">
								<text class="iconfont icon-Magnifier"></text>
								<text>{{ item.keyword}}</text>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musicHead from "../../components/musicHead/musichead.vue"
	import { searchHot, searchWords, searchSuggest } from "../../common/api.js"
	export default {
		data() {
			return {
				searchHot:[],
				searchWord:"",
				searchHistory:[],
				searchType: 1,
				searchList:[],//搜索记录
				searchSuggest: [],//搜索关键词
			}
		},
		onLoad() {
			//热榜搜索
			searchHot().then(res => {
				if(res[1].data.code == 200) {
					this.searchHot = res[1].data.data
				}
			})
			//取出历史记录
			uni.getStorage({
				key:"searchHistory",
				success: (res)=> {
					this.searchHistory = res.data;
				}
			})
		},
		methods: {
			//搜索框搜索词
			handleToWords(word) {
				this.searchWord = word;
				this.handleToSearch(word);
			},
			//搜索事件
			handleToSearch(word) {
				//添加进数组
				this.searchHistory.unshift(word);
				//去重
				this.searchHistory = [...new Set(this.searchHistory)];
				//判断数据最多10条
				if(this.searchHistory.length > 10) {
					this.searchHistory.length = 10;
				}
				//本地存储
				uni.setStorage({
					key: "searchHistory",
					data: this.searchHistory
				})
				this.getSearchHistory(word);//搜索记录
			},
			//历史记录选择
			handleToHistoryWord(item) {
				this.searchWord = item;
				this.getSearchHistory(item)
			},
			//历史记录清除
			handleClear() {
				uni.removeStorage({
					key: "searchHistory",
					success:(res) => {
						this.searchHistory = [];
					}
				})
			},
			//搜索的内容
			getSearchHistory(word) {
				searchWords(word).then(res => {
					if(res[1].data.code == 200) {
						this.searchList = res[1].data.result.songs;
						this.searchType = 2;
					}
				})
			},
			//删除
			searchDetail(){
				this.searchWord = "";
				this.searchType = 1;
			},
			//跳转播放页面
			handleToDetail(songId) {
				uni.navigateTo({
					url:"/pages/detail/detail?songId=" + songId
				})
			},
			//搜索建议
			handleSuggest(e) {
				let value = e.detail.value;
				if(!value) return this.searchType = 1;
				searchSuggest(value).then(res => {
					if(res[1].data.code == 200) {
						this.searchSuggest = res[1].data.result.allMatch;
						this.searchType = 3;
					}
				})
			}
		},
		components:{
			musicHead
		},
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		//搜索
		.search {
			width: 90%;
			height: 80rpx;
			margin: 0 auto;
			background: #f8f8f8;
			border-radius: 38rpx;
			display: flex;
			align-items: center;
			color: #aeaeae;
			text:nth-child(1) {
				margin: 0 20rpx;
			}
			input {
				flex: 1;
				color: black;
			}
			text:nth-child(3) {
				margin-right: 20rpx;
			}
		}
		//历史记录
		.search_history {
			width: 90%;
			margin: 30rpx auto 0;
			font-size: 26rpx;
			.search_history_head {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.search_history_cont {
				display: flex;
				flex-wrap: wrap;
				view {
					background: #f8f8f8;
					margin: 10rpx 20rpx 0 0;
					padding: 16rpx 28rpx;
					border-radius: 40rpx;
				}
			}
		}
		//热搜榜
		.search_hot {
			width: 90%;
			margin: 80rpx auto 0;
			.search_hot_title {
				font-size: 26rpx;
				margin: 0 0 50rpx 0;
			}
			.search_hot_cont {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				.search_hot_lt {
					padding-right: 30rpx;
					color: #fb2222;
				}
				.search_hot_lt_to {
					padding-right: 30rpx;
					color: #a9a9a9;
				}
				.search_hot_ct {
					flex: 1;
					.search_hot_top {
						font-size: 32rpx;
						image {
							width: 50rpx;
							height: 30rpx;
							margin-left: 10rpx;
						}
					}
					.search_hot_bot {
						font-size: 24rpx;
						color: #a9a9a9;
					}
				}
				.search_hot_rt {
					font-size: 28rpx;
					color: #a9a9a9;
				}
			}
		}
		//搜索
		.search_res {
			border-top: 2rpx solid #aeaeae;
			margin-top: 20rpx;
			.search_result {
				display: flex;
				align-items: center;
				width: 95%;
				margin: 0 auto;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #aeaeae;
				.search_result_item {
					flex: 1;
					font-size: 28rpx;
					view {
						color: #6a81b9;
						font-size: 28rpx;
					}
					image {
						width: 50rpx;
						height: 30rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}
					text {
						color: #6a81b9;
						font-size: 26rpx;
						margin-left: 10rpx;
						
					}
				}
				text {
					width: 40rpx;
				}
			}
		}
		//搜索关键词
		.search_suggest_item {
			border-top: 4rpx solid #e8e8e8;
			margin-top: 20rpx;
			.search_suggest_box {
				width: 88%;
				margin: 0 auto;
				.search_suggest_head {
					color: #6a81b9;
					padding: 30rpx 0 0 0;
				}
				.search_suggest_cont {
					display: flex;
					align-items: center;
					margin: 60rpx 0;
					text:nth-child(1) {
						margin-right: 20rpx;
					}
					text:nth-child(2) {
						font-size: 28rpx;
					}
				}
			}
			
		}
	}
</style>
